<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter, type RouteRecordRaw } from "vue-router";

const { currentRoute } = useRouter();
const route = currentRoute.value.matched[0];
const title = ref(route.meta.title);
const leftMenus: RouteRecordRaw[] = [];
const rightMenus: RouteRecordRaw[] = [];
const ceil = Math.ceil(route.children.length / 2);
route.children.forEach((menu, index) => {
  if (index < ceil) {
    leftMenus.push(menu);
  } else {
    rightMenus.push(menu);
  }
});
</script>

<template>
  <div id="header" class="h-16 grid grid-flow-row grid-cols-3 gap-4 bg-gradient-to-br from-light-blue-400 to-indigo-500">
    <div class="h-16 flex justify-end items-end">
      <ul class="list-none">
        <li v-for="item in leftMenus" :key="item.path" class="border border-solid p-2 inline-block">
          <RouterLink :to="item.path" class="text-cool-gray-800">
            {{ item.meta?.title }}
          </RouterLink>
        </li>
      </ul>
    </div>
    <div class="h-16 flex justify-center">
      <h1 class="w-80 border border-solid p-4 pl-9 pr-9">{{ title }}</h1>
    </div>
    <div class="h-16 flex justify-start items-end">
      <ul class="list-none">
        <li v-for="item in rightMenus" :key="item.path" class="border border-solid p-2 inline-block">
          <RouterLink :to="item.path" class="text-cool-gray-800">
            {{ item.meta?.title }}
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#header {
  grid-template-columns: 1 320px 1;
  min-width: 1200px;
}
</style>
